<div class="md:pt-18 bg-gray-50">
  <section class="pt-12 pb-12 border-b border-gray-200 bg-white">
    <div class="max-w-5xl mx-auto px-5">
      <div class="pb-5">
        <a class="bg-gray-200 px-3 py-1 text-gray-600 rounded-xl text-sm hover:text-primary-500 hover:bg-primary-50 focus:outline-none focus:text-primary-500 focus:bg-primary-50 focus:ring-1 focus:ring-focusColor-500" href="<%= students_organisation_cohort_path(@presenter.organisation, @presenter.cohort, @presenter.filters_in_url) %>"><i class="if i-arrow-left-regular"></i><%= t('shared.back_link') %></a>
      </div>
      <div class="flex flex-col md:flex-row items-start justify-between gap-2">
        <div class="flex gap-3 items-center">
          <div class="w-14 h-14 border-gray-200 rounded-full overflow-hidden m-1 shrink-0">
            <div data-re-component="Avatar" data-re-json="<%= { name: @presenter.student.name }.to_json %>"></div>
          </div>
          <div>
            <p class="text-base font-semibold"><%= @presenter.student.name %></p>
          </div>
        </div>
        <div class="flex flex-wrap gap-4 items-center">
          <div class="pe-4 border-e border-gray-300">
            <p class="text-sm text-gray-500"><%= t("shared.cohort") %></p>
            <p class="text-sm font-semibold"><%= @presenter.cohort.name %></p>
          </div>
          <% if @presenter.standing_enabled? %>
            <div class="flex flex-row-reverse md:flex-row items-center justify-start md:justify-start gap-2">
              <div class="text-left rtl:text-right rtl:md:text-left md:text-right">
                <p class="font-semibold text-sm" style="color: <%= @presenter.current_standing.color %>;"><%= @presenter.current_standing.name %></p>
                <%= link_to t("shared.view_standing"), standing_org_student_path(@presenter.student), class: "text-sm text-primary-500 hover:text-primary-700 hover:underline transition" %>
              </div>
              <div class="w-16 h-16 flex items-center justify-center border border-gray-300 rounded-full">
                <%= render 'shared/standing_shield', color: @presenter.current_standing.color, size_classes: "w-12 h-12" %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-gray-50">
    <div class="max-w-5xl mx-auto p-5">
      <div class="grid grid-cols-1 md:grid-cols-6 gap-0 md:gap-5">
        <div class="col-span-2 p-5 bg-gray-100 rounded-lg">
          <h2 class="font-semibold"><%= t('shared.targets_overview') %></h2>
          <div aria-label="assignments-completion-status" class="p-4 flex flex-col border rounded-lg mt-4 bg-white">
            <%= render 'donut_chart', color: 'purple', percentage: @presenter.assignments_completion_percentage %>
            <p class="text-sm font-semibold text-center mt-3"><%= t('shared.total_assignments_completed') %></p>
            <p class="text-sm text-gray-600 font-semibold text-center mt-1"><%= t('shared.assignments_completed', completed: @presenter.assignments_completed, total: @presenter.total_assignments) %></p>
          </div>
          <div aria-label="targets-read-status" class="p-4 flex flex-col border rounded-lg mt-4 bg-white">
            <%= render 'donut_chart', color: 'purple', percentage: @presenter.pages_read_percentage %>
            <p class="text-sm font-semibold text-center mt-3"><%= t('shared.total_pages_read') %></p>
            <p class="text-sm text-gray-600 font-semibold text-center mt-1"><%= t('shared.pages_read', read: @presenter.total_page_reads, total: @presenter.total_targets) %></p>
          </div>
        </div>
        <% if @presenter.average_grades.any? %>
          <div class="col-span-4 flex flex-col p-5 bg-gray-100 rounded-lg mt-5 md:mt-0">
            <h2 class="font-semibold"><%= t('.average_grades') %></h2>
            <div class="flex flex-wrap gap-5 flex-1">
              <% @presenter.average_grades.each do |average_grade| %>
                <div class="flex flex-col flex-1 p-4 mt-4 border rounded-lg items-center justify-center bg-white">
                  <div class="flex flex-col gap-4 items-center w-12">
                    <%= render 'pie_chart', percentage: average_grade[:percentage]  %>
                    <span class="text-xl font-semibold"><%= average_grade[:average_grade].to_s.sub(/\.?0+$/, '') %>/<%= average_grade[:max_grade] %></span>
                  </div>
                  <p class="text-sm font-medium text-gray-500 text-center"><%= average_grade[:name] %></p>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
      <div class="w-full p-5 bg-gray-100 rounded-lg mt-5">
        <% stats = @presenter.milestone_completion_stats %>
        <div class="flex flex-wrap justify-between gap-2">
          <p class="text-sm font-semibold"><%= t("shared.milestones") %></p>
          <div class="flex items-center gap-2 flex-shrink-0">
            <p class="text-xs font-medium text-gray-500 whitespace-nowrap">
              <%= "#{stats[:completed_milestones_count]} / #{ @presenter.total_milestones }" %>
              <span class="px-2 text-gray-300"> <%= '|' %> </span>
              <%= t("shared.percentage_completed", percentage: stats[:percentage]) %>
            </p>
            <div class="flex items-center gap-2 flex-shrink-0">
              <div>
                <svg class="courses-milestone-complete__doughnut-chart"  viewBox="0 0 36 36">
                  <path class="courses-milestone-complete__doughnut-chart-bg "d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
                  <path class="courses-milestone-complete__doughnut-chart-stroke" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke-dasharray="<%= stats[:percentage] %>, 100"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="space-y-2">
          <% @presenter.milestone_completion_status.each do |milestone_number, data| %>
            <div class="flex mt-2 items-center p-2 rounded-md border bg-gray-200 transition">
              <div class="flex items-center">
                <div class="mr-2">
                  <span class="text-xs font-medium px-1 py-0.5 <%= data[:completed] ? ' bg-green-100  rounded' : 'bg-orange-100 rounded' %>">
                    <% if data[:completed] %>
                      <i class="if i-check-circle-solid text-green-600"></i>
                    <% else %>
                      <i class="if i-dashed-circle-light text-orange-600" aria-hidden="true"></i>
                    <% end %>
                  </span>
                </div>
                <div>
                  <p class="text-sm font-semibold mr-2"><%= "#{t("shared.m")}#{milestone_number}" %></p>
                </div>
              </div>
              <div class="flex-1 text-sm"><%= data[:title] %></div>
            </div>
          <% end %>
        </div>
      </div>
      <% if @presenter.coach_notes.exists? %>
        <h2 class="text-base md:text-xl font-semibold mt-8"><%= t("shared.notes") %></h2>
        <% @presenter.coach_notes.each do |coach_note| %>
          <div class="mt-4 p-6 bg-white items-center border border-transparent rounded-lg shadow">
            <p class="inline-block text-xs font-semibold leading-tight bg-gray-300 text-gray-800 mt-px px-1 py-px rounded" title="<%= coach_note.created_at.iso8601 %>"><%= coach_note.created_at.strftime("%B %-d, %Y") %></p>
            <p class="mt-2 convert-markdown" data-json-props="<%= {profile: 'permissive', markdown: coach_note.note}.to_json %>"><%= coach_note.note %></p>
          </div>
        <% end %>
      <% end %>
      <% if @presenter.submissions_pending_review.exists? %>
        <h2 class="text-base md:text-xl font-semibold mt-8"><%= t(".waiting_for_review") %></h2>
        <div class="grid grid-flow-row gap-4 grid-cols-1 xl:grid-cols-2 auto-rows-max mt-4">
          <% @presenter.submissions_pending_review.each do |submission| %>
            <%= render 'submission', submission: submission %>
          <% end %>
        </div>
      <% end %>
      <% if @presenter.reviewed_submissions.exists? %>
        <h2 class="text-base md:text-xl font-semibold mt-8"><%= t(".reviewed_submissions.heading") %></h2>
        <a class="mt-4 p-5 flex bg-white items-center border border-gray-200 rounded-lg shadow-lg font-semibold hover:bg-primary-50 hover:text-primary-500 hover:border-primary-500 cursor-pointer" href="<%= submissions_org_student_path(@presenter.student) %>">
          <i class="if i-clipboard-check-regular if-fw"></i>
          <span class="ps-2 text-sm"><%= t('.reviewed_submissions.button') %></span>
        </a>
      <% end %>
    </div>
  </section>
</div>
